<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="data:,">
    <title></title>

    <style>
        body,
        html {
            margin: 0;
            padding: 0;
            width: 100vw;
            height: 100%;
        }

        canvas {
            display: block;
            touch-action: none;
        }

        canvas:focus {
            outline: none;
        }
    </style>
</head>

<body>
    <script type="module">
        import wasm_bindgen from './apexsky_overlay.js';

        async function run() {
            await wasm_bindgen("./apexsky_overlay_bg.wasm").catch(error => {
                if (!error.message.startsWith("Using exceptions for control flow, don't mind me. This isn't actually an error!")) {
                    throw error;
                }
            });
        }

        run();
    </script>

    <script>
        document.body.addEventListener("contextmenu", (e) => {
            e.preventDefault();
            e.stopPropagation();
        });

        // Insert hack to make sound autoplay on Chrome as soon as the user interacts with the tab:
        // https://developers.google.com/web/updates/2018/11/web-audio-autoplay#moving-forward

        // the following function keeps track of all AudioContexts and resumes them on the first user
        // interaction with the page. If the function is called and all contexts are already running,
        // it will remove itself from all event listeners.
        (function () {
            // An array of all contexts to resume on the page
            const audioContextList = [];

            // An array of various user interaction events we should listen for
            const userInputEventNames = [
                "click",
                "contextmenu",
                "auxclick",
                "dblclick",
                "mousedown",
                "mouseup",
                "pointerup",
                "touchend",
                "keydown",
                "keyup",
            ];

            // A proxy object to intercept AudioContexts and
            // add them to the array for tracking and resuming later
            self.AudioContext = new Proxy(self.AudioContext, {
                construct(target, args) {
                    const result = new target(...args);
                    audioContextList.push(result);
                    return result;
                },
            });

            // To resume all AudioContexts being tracked
            function resumeAllContexts(_event) {
                let count = 0;

                audioContextList.forEach((context) => {
                    if (context.state !== "running") {
                        context.resume();
                    } else {
                        count++;
                    }
                });

                // If all the AudioContexts have now resumed then we unbind all
                // the event listeners from the page to prevent unnecessary resume attempts
                // Checking count > 0 ensures that the user interaction happens AFTER the game started up
                if (count > 0 && count === audioContextList.length) {
                    userInputEventNames.forEach((eventName) => {
                        document.removeEventListener(eventName, resumeAllContexts);
                    });
                }
            }

            // We bind the resume function for each user interaction
            // event on the page
            userInputEventNames.forEach((eventName) => {
                document.addEventListener(eventName, resumeAllContexts);
            });
        })();
    </script>
</body>

</html>
